<template>
	<div class="container">
		<div class="el-card-body-top-zero" style="display: flex; gap: 20px">
			<YdCard :title="'系统返回码'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'system-return-code-bar'" :options="state.systemReturnCodeOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'业务返回码'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'business-return-code-bar'" :options="state.businessReturnCodeOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ECOption } from '../../../../echarts';
import { reactive, ref } from 'vue';
import 'echarts/lib/component/legend';
import YdEcharts from '@/components/YdEcharts/index.vue';
import { BARSERIESCOLOR, formatterToolTipFn, GRID, NAMETEXTSTYLE } from '../echartsConfig';
import { commonFormatter } from '@/utils/common';
import { colorSortGroup, xAxisOrYaxis } from '@/utils/echartsConfig';

const emit = defineEmits<{
	(event: 'echartsClick', e: any): void;
}>();
interface Props {
	systemReturnCodeScale: number[];
	systemReturnCodeData: number[];
	businessReturnCodeScale: string[];
	businessReturnCodeData: number[];
}
const props = withDefaults(defineProps<Props>(), {
	systemReturnCodeScale: () => [],
	systemReturnCodeData: () => [],
	businessReturnCodeScale: () => [],
	businessReturnCodeData: () => [],
});
const echartsData = reactive<any>({
	title: {
		text: '',
		left: 'center',
		top: 'bottom',
		textStyle: {
			//文字颜色
			color: '#FFFFFF',
			//字体风格,'normal','italic','oblique'
			fontStyle: 'normal',
			//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
			fontWeight: 500,
			//字体系列
			fontFamily: 'sans-serif',
			//字体大小
			fontSize: 16,
		},
	},
	grid: {
		left: '0%',
		right: '0%',
		top: '5%',
		bottom: '12%',
		containLabel: true,
	},
	colorGroup: ['#4DBC84', '#FE9A0C', '#FE5578', '#06F4F4'],
});

const state = reactive<any>({
	extendData: {
		pageSize: 10,
		pageNum: 1,
	},
	// 系统返回码柱状图
	systemReturnCodeOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '次');
			},
		},
		grid: GRID,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.systemReturnCodeScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			axisLabel: {
				...xAxisOrYaxis.yAxis.axisLabel,
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '次');
				},
			},
		},
		color: colorSortGroup,
		series: [
			{
				name: '系统返回码',
				type: 'bar',
				barWidth: '10%',
				// showBackground: true,
				data: props.systemReturnCodeData,
				itemStyle: {
					// normal: {
					// 	color: BARSERIESCOLOR,
					// 	barBorderRadius: 50,
					// },
				},
			},
		],
	} as ECOption,
	// 业务返回码柱状图
	businessReturnCodeOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '次');
			},
		},
		grid: GRID,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.businessReturnCodeScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			axisLabel: {
				...xAxisOrYaxis.yAxis.axisLabel,
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '次');
				},
			},
		},
		color: colorSortGroup,
		series: [
			{
				name: '业务返回码',
				type: 'bar',
				barWidth: '10%',
				data: props.businessReturnCodeData,
				itemStyle: {
					// normal: {
					// 	color: BARSERIESCOLOR,
					// 	barBorderRadius: 50,
					// },
				},
			},
		],
	} as ECOption,
});

function echartsClick(e: any) {
	emit('echartsClick', e);
}
</script>
<style lang="scss" scoped>
.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 340px;
	gap: 20px;
}
</style>
